<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>街景</title>
    <style>
        body {
            margin: 0
        }
        
        html,
        body,
        .map-wrapper,
        #my-map {
            width: 100%;
            height: 100%;
        }
        
        .map-wrapper {
            position: relative;
        }
        
        .zoomin80 {
            width: 40px;
            height: 45px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .zoomin80 img {
            width: 15px;
            height: 15px;
            border: 0;
        }
        
        .zoom-control {
            width: 40px;
            height: 90px;
            position: relative;
            border-radius: 10px;
            border: 1px solid #EBEBEB;
            background-color: white;
        }
        
        .zoomout80 img {
            width: 15px;
            height: 3px;
            border: 0;
        }
        
        .zoomout80 {
            width: 40px;
            height: 45px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .jiejing {
            background: url('./images/list_icon_state2@2x.png') no-repeat center;
            background-size: 26px 26px;
            width: 35px;
            height: 35px;
            border-radius: 10px;
            border: 1px solid #EBEBEB;
            background-color: white;
            padding: 5px;
            box-sizing: border-box;
        }
        
        .yuandian {
            margin-top: 10px;
            width: 35px;
            height: 35px;
            border-radius: 10px;
            border: 1px solid #EBEBEB;
            background-color: white;
        }
        
        .yuandian div.img {
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .yuandian div.img img {
            width: 20px;
            height: 20px;
        }
        
        a[target],
        div.anchorBL a {
            display: none;
        }
    </style>
</head>

<body>
    <div class="map-wrapper">
        <div id="my-map"></div>
    </div>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=q0VZgTsuRLBZYXMCnNHkWheaTvbGu6QY"></script>
    <script>
        var mapInstance = null;
        var panorama = null;
        var lon = getParameterByName("lon");
        var lat = getParameterByName("lat");
        var marker = null;
        var panoramaService = new BMap.PanoramaService();


        function getParameterByName(name) {
            var url = location.search
            url = decodeURIComponent(url)
            var theRequest = new Object()
            if (url.indexOf('?') != -1) {
                var str = url.substr(1)
                var strs = str.split('&')
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split('=')[0]] = unescape(strs[i].split('=')[1])
                }
            }
            return theRequest[name]
        };

        function setPanorama(lon, lat) {

            panoramaService.getPanoramaByLocation(new BMap.Point(lon, lat), function(data) {
                if (data == null) {
                    alert("该位置暂时没有街景");
                    return;
                }
                var myData = data;
                panorama = mapInstance.getPanorama(); //获取实例对象
                panorama.setId(myData.id); //全景ID
                panorama.show(); //显示全景
            });
        }

        function initMap(param) {
            var blon = lon ? lon : 113.864275;
            var blat = lat ? lat : 22.566936;
            mapInstance = new BMap.Map('my-map', {
                minZoom: 4,
                maxZoom: 20,
                enableMapClick: false
            })
            mapInstance.enableScrollWheelZoom();
            mapInstance.enableDoubleClickZoom();
            mapInstance.enableAutoResize();
            mapInstance.centerAndZoom(new BMap.Point(blon, blat), 19);
            // BMAP_SATELLITE_MAP BMAP_NORMAL_MAP
            var mapTypeControl = new BMap.MapTypeControl({
                mapTypes: [BMAP_SATELLITE_MAP, BMAP_NORMAL_MAP]
            });
            mapInstance.addControl(mapTypeControl);


            mapInstance.addEventListener('click', function(e) {
                marker.setPosition(e.point);
            });

        }


        function ZoomControl() {
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        ZoomControl.prototype = new BMap.Control();

        ZoomControl.prototype.initialize = function(map) {
            var divWrap = document.createElement("div");
            var divTop = document.createElement("div");
            var divBottom = document.createElement("div");

            var topImg = document.createElement("img");
            topImg.src = './images/trail_icon_largr@2x.png';


            var bottomImg = document.createElement("img");
            bottomImg.src = './images/trail_icon_narrow@2x.png';

            divWrap.style.width = "40px";
            divWrap.style.height = "90px";
            divWrap.style.position = "relative";
            divWrap.className = 'zoom-control';
            divTop.className = "zoomin80";
            divTop.append(topImg);
            divBottom.className = "zoomout80";
            divBottom.append(bottomImg);

            divTop.onclick = function(e) {
                mapInstance.setZoom(mapInstance.getZoom() + 1);
            }
            divBottom.onclick = function(e) {
                mapInstance.setZoom(mapInstance.getZoom() - 1);
            }
            divWrap.appendChild(divTop);
            divWrap.appendChild(divBottom);
            mapInstance.getContainer().appendChild(divWrap);
            return divWrap;
        }

        function JieJingControl() {
            this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
            this.defaultOffset = new BMap.Size(10, 25);
        }

        JieJingControl.prototype = new BMap.Control();

        JieJingControl.prototype.initialize = function(map) {

            var divWrap = document.createElement("div");
            var divTop = document.createElement("div");
            var divBottom = document.createElement("div");

            divWrap.style.width = "35px";
            divWrap.style.height = "80px";
            divWrap.style.marginBottom = "-15px";
            divWrap.style.position = "relative";
            divTop.className = "jiejing";

            divBottom.className = "yuandian";
            var divImg = document.createElement("div");
            var carImg = document.createElement("img");

            carImg.src = './images/home_icon_vehicle@2x.png';
            divImg.className = "img";
            divImg.append(carImg);
            divBottom.append(divImg);




            divTop.onclick = function(e) {
                setPanorama(marker.point.lng, marker.point.lat)
            }

            divBottom.onclick = function(e) {
                var point = new BMap.Point(lon, lat);
                marker.setPosition(point);
                mapInstance.setCenter(point);

            }

            divWrap.appendChild(divTop);
            divWrap.appendChild(divBottom);
            mapInstance.getContainer().appendChild(divWrap);
            return divWrap;
        }


        function addControl() {
            var myZoomCtrl = new ZoomControl();
            var JieJingCtrl = new JieJingControl();
            mapInstance.addControl(myZoomCtrl);
            mapInstance.addControl(JieJingCtrl);
        }

        function addOverlay() {
            var point = new BMap.Point(lon, lat);
            marker = new BMap.Marker(point, {});
            mapInstance.addOverlay(marker);
        }

        initMap();

        if (lon !== undefined && lat !== undefined) {
            addOverlay();
            addControl();
            setPanorama(lon, lat);
        }
    </script>
</body>

</html>